import React, { useState } from 'react'
import './index.css'
import Header from '../../../components/Header'
import { Avatar, Rate, Space, Swiper, Image, Button, ImageViewer } from 'antd-mobile'
import { HeartOutline, FingerdownOutline, LikeOutline } from 'antd-mobile-icons'
import tou from '../../../assets/image/头像 男孩.png'
import footImg from '../../../assets/image/面3.png'
import footImg1 from '../../../assets/image/面5.png'
import footImg2 from '../../../assets/image/面4.png'



export default function FreeFood() {
    const [list, setList] = useState([1, 2, 4]);
    const [visible, setVisible] = useState(false)
    const [visibleTwo, setVisibleTwo] = useState(false)

    const demoImages = [
        'https://images.unsplash.com/photo-1620476214170-1d8080f65cdb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3150&q=80',
        'https://images.unsplash.com/photo-1601128533718-374ffcca299b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3128&q=80',
        'https://images.unsplash.com/photo-1567945716310-4745a6b7844b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3113&q=80',
        'https://images.unsplash.com/photo-1624993590528-4ee743c9896e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=200&h=1000&q=80',
    ]

    const footImages = [
        footImg,
        footImg1,
        footImg2,
    ]

    const colors = ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac'];

    const swiperItems = colors.map((color, index) => (
        <Swiper.Item key={index} onClick={() => setVisible(true)}>
            <div
                className='freeFoodMain_content'
                style={{ background: color }}
            // onClick={}
            >
                {index + 1}
            </div>
        </Swiper.Item>

    ))


    return (
        <div>
            <Header />
            <div className='freeFoodMain'>
                {/* 走马灯 */}
                <Swiper
                    loop
                    autoplay
                    onIndexChange={i => {
                        console.log(i, 'onIndexChange1')
                    }}
                >
                    {swiperItems}
                </Swiper>
                <ImageViewer.Multi
                    images={demoImages}
                    visible={visible}
                    defaultIndex={1}
                    onClose={() => {
                        setVisible(false)
                    }}
                />
                {/* 信息 */}
                <div className='freeFoodMain_message'>
                    <div>
                        <h2>菜品名称</h2>
                        <div className='freeFoodMain_message_two'>
                            菜品介绍xxxxxxxxxxxxxxxxxxxx
                        </div>
                    </div>
                    <div>
                        <HeartOutline fontSize={24} />
                    </div>
                </div>
                <h2 className='freeFoodMain_h2'>评论</h2>
                <div className='freeFoodMain_talk'>
                    {
                        list.map(() => {
                            return (
                                <div className='freeFoodMain_card'>
                                    <div className='freeFoodMain_card_head'>
                                        <div className='freeFoodMain_card_head_left'>
                                            <Avatar src={tou} />
                                            <div className='freeFoodMain_card_head_left_my'>
                                                <div>
                                                    肖二拾
                                                </div>
                                                <div>
                                                    2024-11-12
                                                </div>
                                            </div>
                                        </div>
                                        <div className='freeFoodMain_card_head_right'>
                                            <Rate
                                                readOnly
                                                value={5}
                                                style={{
                                                    '--star-size': '20px',
                                                    '--active-color': '#fec303',
                                                }} />
                                        </div>

                                    </div>
                                    <div className='freeFoodMain_card_banner'>
                                        <div className='freeFoodMain_card_mess'>
                                            这是内容xxxxxxxxx
                                        </div>
                                        <div className={'imagesContainer'}>
                                            <Space wrap>
                                                <Image
                                                    src={footImg}
                                                    width={64}
                                                    height={64}
                                                    fit='cover'
                                                    style={{ borderRadius: 8 }}
                                                    onClick={() => setVisibleTwo(true)}
                                                />
                                                <Image
                                                    src={footImg}
                                                    width={64}
                                                    height={64}
                                                    fit='cover'
                                                    style={{ borderRadius: 8 }}
                                                />
                                                <Image
                                                    src={footImg}
                                                    width={64}
                                                    height={64}
                                                    fit='cover'
                                                    style={{ borderRadius: 8 }}
                                                />
                                            </Space>
                                            <ImageViewer.Multi
                                                images={footImages}
                                                visible={visibleTwo}
                                                defaultIndex={1}
                                                onClose={() => {
                                                    setVisibleTwo(false)
                                                }}
                                            />
                                        </div>
                                    </div>
                                    <div className='freeFoodMain_card_footer'>
                                        <span><FingerdownOutline />{2}</span>
                                        <span><LikeOutline />{100}</span>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
            <div className='freeFoodMain_order'>
                <Button block color='primary' size='large'>
                    点击购买
                </Button>
            </div>
        </div>
    )
}
